<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<form action="/enrollandpay/class/save" id="classForm">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">&times;
        </button>
        <h4 class="modal-title" id="myModalLabel2">班级名称</h4>
    </div>
    <div class="modal-body">
        <!--弹出框样式-->
        <style>
            ul, li {
                list-style: none;
            }
        </style>
        <!--弹出框样式end-->
        <!--
         -->
        <ul>
            <input type="text" class="hidden" name="id" value="${thisClass.id}">
            <input type="text" class="hidden" name="token" value="${token}">

            <li class="row">
                <div class="col-sm-2" style="padding: 0.2em 0">班级名称：</div>
                <div>
                    <input type="text" name="name" class="col-sm-8 col-sm-8-1" value="${thisClass.name}"
                           placeholder="请输入班级名称" style="padding: 0.2em 0.5em;">
                </div>
            </li>
            <li class="row">
                <div class="col-sm-2" style="padding: 0.2em 0">校区:</div>
                <select name="campusId" onchange="loadGrades(this.value, ' ')">
                    <c:forEach items="${campuses}" var="c">
                        <option value="${c.id }" ${thisClass.campusId eq c.id ? "selected=selected":""} >${c.name }</option>
                    </c:forEach>
                </select>
            </li>
            <li class="row">
                <div class="col-sm-2" style="padding: 0.2em 0">年级：</div>
                <select name="gradeId" id="gradeId">
                    <option >==年级==</option>
                </select>
            </li>

            <li class="row">
                <div class="col-sm-2" style="padding: 0.2em 0">备注：</div>
                <div>
                    <input type="text" name="note" class="col-sm-8 col-sm-8-1" value="${thisClass.note}"
                           placeholder="请输入备注" style="padding: 0.2em 0.5em;">
                </div>
            </li>
        </ul>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
        </button>
        <button type="button" class="btn btn-primary" onclick="doSave('class')">
            修改
        </button>
    </div>
</form>
<!--
<script src="/enrollandpay/js/jQuery.js"></script>
-->
<script>
    $(function(){
        loadGrades(${thisClass.campusId}, ${thisClass.gradeId});
    })

    /**
     *  动态加载年级
     *  @param campusId 校区id
     *  @param oldGradeId 第一次加载时，用于回显的年级id
     */
    function loadGrades(campusId, oldGradeId) {
        // 删除原来的数据
        $("#gradeId option").filter(function () {
            return this.innerHTML.indexOf("==") != 0;
        }).remove();

        // 用于第一次加载的数据回显

        // 加载数据
        $.get("/enrollandpay/grade/loadGradeByCampusId", {campusId:campusId}, function (result) {
            $(result).each(function(i){
                if(result[i].id == oldGradeId)
                    $("#gradeId").append("<option value=" + result[i].id + " selected='selected'>" + result[i].name + "</option>");
                else
                    $("#gradeId").append("<option value=" + result[i].id + ">" + result[i].name + "</option>");
            });
        });
    }
</script>
